<section style="height:50vh;min-height:200px" id="hero">


    <div class="container">
        <div class="row align-items-center" style="height:50vh;min-height:200px">
            <div class="col-12 hero-text-image">
                <div class="row " style="margin:20px">
                    初次使用，请绑定电话号码

                </div>
                <div class="row " style="margin:20px">
                    <div class="col-xs-4">电话: </div>
                    <div class="col-xs-8">

                        <input id="telUI" style="width: 100%;" />
                    </div>
                </div>
                <div class="row " style="margin:20px">
                    <div class="col-xs-4">密码: </div>
                    <div class="col-xs-8">

                        <input id="pswdUI" style="width: 100%;" />
                    </div>
                </div>
                <div class="row " style="margin:20px">
                    <div class="col-xs-4">确认密码: </div>
                    <div class="col-xs-8">

                        <input id="rePswdUI" style="width: 100%;" />
                    </div>
                </div>
                <div class="row" style="margin:20px">
                    <div class="col-xs-4">验证码 </div>
                    <div class="col-xs-8" id="questionNumUI">
                        <input id="captchaUI" style="width: 100%;" />
                    </div>
                </div>
                <div class="row" style="margin:20px; ">
                    <div class="col-xs-5"><button onclick="getCaptcha()">获取验证码</button></div>
                    <div class="col-xs-7"><button onclick="submit()">提交</button></div>
                </div>
            </div>
        </div>
    </div>
    </div>

</section><!-- End Hero -->

<main id="main">
    <!-- ======= Testimonials Section ======= -->
    <div class=" container ">


    </div><!-- /input-group -->


    </div>
    <script>
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var openid = ""
        var username = ""
        var address = ""
        var face = ""
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == "openid") {
                openid = pair[1]
            } else if (pair[0] == "username") {
                username = pair[1]
            } else if (pair[0] == "address") {
                address = pair[1]
            } else if (pair[0] == "face") {
                face = pair[1]
            }
        }

        function getCaptcha() {
            axios.post('/api/student/captcha?tel=' + document.getElementById("telUI").value)
                .then(function (response) {
                    var res = response.data;
                    alert(res.title)


                });
        }

        function submit() {
            axios.post('/api/student/register?password=' + document.getElementById("pswdUI").value + "&tel=" + document.getElementById("telUI").value + "&captcha=" + document.getElementById("captchaUI").value)
                .then(function (response) {
                    var res = response.data;
                    if (res.code != 200) {
                        alert(res.title)
                        return;
                    }
                    sessionStorage.setItem("token", res.title);
                    window.location.href = "/user"

                });
        }
    </script>
</main>